<template>
<mu-appbar class="navbar" :color="theme.color" title="Lovers">
  <template v-if="unauth" slot="right" >
    <mu-button flat @click="change('login')">登录</mu-button>
    <mu-button flat @click="change('regist')">注册</mu-button>
  </template>
  <template v-else>
    <mu-button icon slot="left" @click="open">
      <mu-icon value="menu"></mu-icon>
    </mu-button>
    <mu-menu slot="right" open-on-hover>
      <mu-button flat>
        <mu-icon value="palette"></mu-icon>
      </mu-button>
      <mu-list slot="content" toggle-nested :value="activeTheme" dense>
        <mu-list-item button v-for="(item,i) in themeList" :key="i" :value="i" @click="switchTheme(item)">
          <mu-list-item-title>
            <mu-badge :content="item.color" :color="item.color"></mu-badge>{{item.name}}
          </mu-list-item-title>
        </mu-list-item>
      </mu-list>
    </mu-menu>
    <mu-menu slot="right" open-on-hover>
      <mu-button flat>
        <mu-badge content="12" circle color="secondary">
          <mu-icon value="mail_outline"></mu-icon>
        </mu-badge>
      </mu-button>
      <mu-list slot="content" toggle-nested :value="activeTheme" dense>
        <mu-list-item button v-for="(item,i) in themeList" :key="i" :value="i">
          <mu-list-item-title>{{item.name}}</mu-list-item-title>
        </mu-list-item>
      </mu-list>
    </mu-menu>
  </template>
</mu-appbar>
</template>

<script>
import Vue from 'vue'
import {
  AppBar,
  Button,
  Icon,
  Menu,
  List,
  Badge
} from 'muse-ui'

Vue.use(AppBar).use(Button).use(Icon).use(Menu).use(List).use(Badge)

export default {
  name: 'Navbar',
  data () {
    return {
      activeTheme: 0,
      themeList: [{
        name: '',
        color: '#00b0f0'
      },
      {
        name: '',
        color: '#00d1b2'
      },
      {
        name: '',
        color: '#f4b976'
      },
      {
        name: '',
        color: '#f39894'
      },
      {
        name: '',
        color: '#26b6be'
      }]
    }
  },
  props: [
    'unauth'
  ],
  computed: {
    theme () {
      return this.$store.state.theme.theme
    }
  },
  methods: {
    change (message) {
      this.$router.push({ name: 'auth', params: { type: message } })
    },
    open () {
      this.$emit('open')
    },
    switchTheme (item) {
      this.$store.dispatch('SWITCH_THEME', {
        theme: item
      })
    }
  }
}
</script>

<style scoped>
.navbar{
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
}
</style>
